/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */

.pure-cell {
    display: flex;
    flex-direction: row;
    align-items: var(--pure-cell-align-items, center);
    padding: var(--pure-cell-padding, 8px 15px);
    gap: var(--pure-cell-gap);

    &__icon {
        font-size: var(--pure-cell-icon-size, 1.25em);
        color: var(--pure-cell-icon-color);
        font-weight: var(--pure-cell-icon-font-weight);
        flex-shrink: 0;
        margin: var(--pure-cell-icon-margin, 0 6px 0 0);
        width: var(--pure-cell-icon-width);
        height: var(--pure-cell-icon-height);
        border: var(--pure-cell-icon-border);
        border-radius: var(--pure-cell-icon-border-radius);
        background: var(--pure-cell-icon-background);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    &__title {
        font-size: var(--pure-cell-title-font-size);
        color: var(--pure-cell-title-color);
        font-weight: var(--pure-cell-title-font-weight, 600);
        flex: 1;
        margin: var(--pure-cell-title-margin);
        padding:  var(--pure-cell-title-padding);
    }

    &__desc {
        font-size: var(--pure-cell-desc-font-size, 0.8em);
        color: var(--pure-cell-desc-color, var(--pure-text-color-regular));
        font-weight: var(--pure-cell-desc-font-weight);
        flex-shrink: 0;
        margin: var(--pure-cell-desc-margin);
    }

    &__arrow {
        font-size: var(--pure-cell-arrow-size, 0.8em);
        color: var(--pure-cell-arrow-color, var(--pure-text-color-regular));
        font-weight: var(--pure-cell-arrow-font-weight);
        flex-shrink: 0;
        margin: var(--pure-cell-arrow-margin,0 0 0 3px);
        transition: 0.25s;
        width:  var(--pure-cell-arrow-width);
        height:  var(--pure-cell-arrow-height);
        border: var(--pure-cell-arrow-border);
        border-radius: var(--pure-cell-arrow-border-radius);
        background:  var(--pure-cell-arrow-background);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    &--expand {
        .pure-cell__arrow {
            transform: var(--pure-cell-arrow-transform, rotate(90deg));
        }
    }
}
